<template>
	<view class="list" >
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in nav" :key="index" :class="{active:current == index}" @tap="checkNav(index,item.node_id)">
				{{item.name}}
			</view>
		</view>
		<scroll-view class="list-c" scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolower" lower-threshold="50" @scroll="scroll">
				<view class="lou pdf-lou" v-for="(item,index) in data3" :key="index"  @tap="playPdf(item.url,item.is_download,item.title,1)">
					{{item.name}}
				</view>
				<view class="lou title-lou" v-for="(item,index) in data1" :key="index">
					<view class="name">{{item.paper_title}}</view>
						<view class="bts">
							<view v-if="item.status == 1" class="tagBt">已完成</view>
							<view v-if="item.status == 2" class="tagBt" style="visibility: hidden;">未开始</view>
							<view v-if="item.status == 0" class="tagBt">未完成，已作答{{item.has_exam_count}}题</view>
							<view class="bt bt-a" v-if="item.status == 1" @tap="goTest(item.paper_code_crc32)">再次训练</view>
							<view class="bt bt-a" v-if="item.status == 0"  @tap="goTest(item.paper_code_crc32)">继续训练</view>
							<view class="bt bt-a" v-if="item.status == 2"  @tap="goTest(item.paper_code_crc32)">开始训练</view>
						</view>
				</view>
				<view class="vidoe-lou" v-for="(item,index) in data2" :key="index" @tap="play(item.video_url)">
					<view class="videoWrap">
						<!-- <video :src="item.video_url" class="videoBox" controls>
						</video> -->
						<image :src="item.video_cover" mode=""></image>
					</view>
					<view class='name'>
						{{item.video_title}}
					</view>
					<view class="time">
						{{item.add_time}}
					</view>
				</view>
				<view v-if="total > 1" class="is_bottom">
					<text v-show="is_bottom">到底了</text>
					<text v-show="!is_bottom">加载下页中...</text>
				</view>
		</scroll-view>
	</view>
</template>
<script>
	import mixin from '@/util/mixin.js';
	import data_out from '@/data/list.js'; //筛选菜单数据
	export default {
		mixins: [mixin],
		data() {
			return {
				nav:[{name:"在线刷题"},{name:"视频讲解"},{name:"内部资料"}],
				 scrollTop: 0,
				 old: {
					 scrollTop: 0
				 },
				is_bottom:false,
				total:0,
				page:1,
				user_l:"",
				current:0,
				data1:[],
				data2:[],
				data3:[]
			}
		},
		onLoad:function(option){
			  this.currentNav = option.index;
			  this.node_id = option.node_id;
		},
		onShow: function(){
			this.data1 = [];
			this.data2 = [];
			this.data3 = [];
			this.total = 0;
			this.page = 1;
            this.current = 0;
			const _this = this;
			uni.getStorage({
			    key: 'user_l',
			    success: function (res) {
					_this.user_l = res.data;
					_this.render_list1 ()
			    }
			});
		},
		computed:{
			
		},
		methods: {
			checkNav(index){
				if(this.current != index){
					this.current = index;
					this.total = 0;
					this.totlePage = 1;
					this.data1 = [];
					this.data2 = [];
					this.data3 = [];
				    this.page = 1;
					if(index == 0){
						this.render_list1();
					}
					if(index == 1){
						this.render_list2();
					}
					if(index == 2){
						this.render_list3();
					}
					this.scrollTop = this.old.scrollTop
					this.$nextTick(function() {
					     this.scrollTop = 0
					 });
					
				}
			},
			async render_list1(){
				const _this = this;
				if (this.page > this.totlePage) {
					this.is_bottom = true;
				}else{
					const res = await this.$http({
						url:'/Wxvideo/ytPaperList',
						method:"post",
						data:{page:_this.page,user_id:_this.user_l.user_id}
					})
					// const value = data_out.mock.pdf;
					const value = res;
					console.log(value);
					this.total = value.total_page;
					this.totlePage = value.total_page;
					// this.data1 = res.data;
					//console.log(value.data);
					this.data1.push(...value.data);
					//console.log(this.data1);
					this.page ++;
				}
			},
			async render_list2(){
				const _this = this;
				if (this.page > this.totlePage) {
					this.is_bottom = true;
				}else{
					const res = await this.$http({
						url:'/Wxvideo/pageVideoList',
						method:"post",
						data:{page:_this.page,type:0}
					})
					const value = res;
					this.total = value.total_page;
					this.totlePage = value.total_page;
					this.data2.push(...value.data);
					this.page ++;
				}
			},
			async render_list3(){
				const _this = this;
				if (this.page > this.totlePage) {
					this.is_bottom = true;
				}else{
					const res = await this.$http({
						url:'/Wxvideo/documentList',
						method:"post",
						data:{page:_this.page}
					})
					// const value = data_out.mock.pdf;
					const value = res;
					this.total = value.total_page;
					this.totlePage = value.total_page;
					// this.data1 = res.data;
					//console.log(value.data);
					this.data3.push(...value.data);
					//console.log(this.data1);
					this.page ++;
				}
			},
			scrolltolower(){
				console.log(this.current);
				const a = this.current;
				if(a == 0){
					this.render_list1();
				}
				if(a == 1){
					this.render_list2();
				}
				if(a == 2){
					this.render_list3();
				}
			},
			playPdf(url,is_d,title,type){
				uni.navigateTo({
				    url: "../pdf/pdf?url="+url + "&down="+is_d + "&name="+title + "&type="+type
				});
			},
			play(url){
				uni.setStorage({
					 key: 'vidoe',
					 data: url
				});
				uni.navigateTo({
				    url: "../pageDtail/pageDtail"
				});
			},
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},
			goTest(id){
				uni.navigateBack({
				   delta: 1
				 });
				uni.navigateTo({
				    url: "../moreTest/moreTest?id="+id
				});
				uni.reLaunch({
					url: "../index/index"
				});
			},
			// adfasdfwqfasdfasfasfasfasdf
			activon1() {
				uni.showModal({
					title:'提示',
					content:"是否确定删除？",
					showCancel:true,
					success:async (res)=> {
						if(res.confirm) {
							const res = await request("article/" + item.id,{},"delete","wy");
							if(res) {
								this.list.splice(index,1)
							}
						}
					}
				})
			},
			action() {
				wx.navigateToMiniProgram({
				    appId: 'wx62add167a6ada00d',
				    path: 'pages/index',//要打开B小程序的页面
				    extraData: { },//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
				    envVersion: 'release',//打开的对应小程序环境：开发develop、体验trial、生产release 
				    success(res) {
				        console.log('打开成功',res)
				    }
				})
			}
		}
	}
</script>

<style lang="scss">
    .list {
		 display:flex;
		 justify-content: space-between;
		 padding-right: 32rpx;
		 height: 100%;
		 .nav {
			  width: 180rpx;
			  height: 100%;
			  background-color: #fff;
			  .nav-item {
				   height:174rpx;
				   background-color: #fff;
				   display: flex;
				   justify-content:center;
				   align-items:center;
				   font-size: 32rpx;
				   &.active {
					   color:#f75b46;
					   border-left: 3px solid #f75b46;
					   font-weight: bold;
				   }
			  }
		 }
		 .list-c{
			  width:516rpx;
			  height: 100%;
			  overflow: hidden;
			 .ready{
				 color: #868c9f;
				 font-size: 26rpx;
				 padding-top:20rpx;
				 height:174rpx;
				 .ready-text {
					 margin-bottom: 28rpx;
				 }
				 .persent {
					  height:10rpx;
					  width: 100%;
					  background-color:#f0f0f0;
					  border-radius:8rpx; 
				      overflow: hidden;
					  .value {
						  border-radius:8rpx;
						  width: 30%;
						  height: 100%;
					  }
				 }
			 }
		 }
		 
		 ::-webkit-scrollbar {
		   width: 0;
		   height: 0;
		   color: transparent;
		 }
		 
		 .pdf-lou {
			 background-color: #fff;
			 border-radius: 18rpx;
			 padding: 36rpx 36rpx;
			 margin-top: 32rpx;
			 color:#2e323e;
			 overflow: hidden; 
			 text-overflow: ellipsis;
			 white-space: nowrap;
			 
		 }
		
		 .is_bottom{
			 height: 75rpx;
			 line-height: 75rpx;
		 }
		

			.vidoe-lou {
				padding-top: 32rpx;
				margin-bottom:32rpx;
				.videoWrap {
					width: 100%;
					height: 280rpx;
					margin-bottom: 22rpx;
					position: relative;
					border-radius: 8rpx;
					overflow: hidden;
					.videoIcon {
						width: 50rpx;
						height:33rpx;
						position: absolute;
						top:30rpx;
						left:20rpx;
					}
					image {
						width: 100%;
						height: 280rpx;
					}
				}
				.name {
					color: #2e323e;
					max-height: 80rpx;
					overflow: hidden;
					margin-bottom: 10rpx;
				}
				.time {
					color: #868c9f;
					height: 52rpx;
					line-height: 52rpx;
					
				}
			}
	
		
		
	  .title-lou {
	  			 padding: 34rpx;
	  			 background-color: #fff;
	  			
	  			 margin-top: 28rpx;
	  			 .name {
	  			 	 font-size: 32rpx;
	  			 }
	  			 
	  			 .bts {
	  				 display: flex;
	  				 justify-content: space-between;
	  				 padding-top: 24rpx;
	  				 .tagBt {
	  					 position:relative;
	  					 top:-14rpx;
	  					 color:#cccccc;
	  				 }
	  				 .bt {
	  					 width: 134rpx;
	  					 height: 56rpx;
	  					 border-radius: 28rpx;
	  					 color:#fff;
	  					 @include  center;
	  					 font-size: 24rpx;
	  				 }
	  			 }
	  			
	  }
	}
	
</style>

